<template>
  <PageContainer>
    <div class="search-list">
      <div class="left">
        <div class="item">
          <el-select v-model="searchParams.type">
            <el-option label="全部交易类型" value="" />
          </el-select>
        </div>
        <div class="item">
          <el-select v-model="searchParams.status">
            <el-option label="全部结算状态" value="" />
          </el-select>
        </div>
        <div class="item">
          <div class="label">支付时间</div>
          <el-date-picker
            v-model="searchParams.payTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <div class="item">
          <div class="label">客户</div>
          <el-input v-model="searchParams.keyword" style="width: 240px" placeholder="请输入" :suffix-icon="Search" />
        </div>
      </div>
    </div>
    <div class="color-999 mb-[20px] pt-[10px]">共有3条记录，总金额400.00元，退款金额200.00元</div>
    <div class="table-wrap">
      <el-table :data="tableData">
        <el-table-column prop="orderNo" label="类型" />
        <el-table-column prop="payTime" label="名称" />
        <el-table-column prop="payType" label="客户" />
        <el-table-column prop="amount" label="金额（元）" />
        <el-table-column prop="amount" label="收支类型" />
        <el-table-column prop="amount" label="支付方式" />
        <el-table-column prop="amount" label="支付时间" />
        <el-table-column prop="amount" label="结算状态" />
        <el-table-column prop="amount" label="操作">
          <template #default="scope">
            <el-link type="primary">退单</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
defineOptions({
  name: 'AllOrder',
})
const searchParams = ref({
  type: '',
  status: '',
  payTime: [],
  keyword: '',
})
const tableData = ref([])
</script>

<style lang="scss" scoped></style>
